<template>
  <el-dialog v-model="props.addBtn"
             title="添加新角色" width="500"

             :before-close="off"
             :center="true">
    <el-form :model="form">
      <el-form-item label="角色名称" required label-width="140px">
        <el-input v-model="form.roleName" placeholder="请输入角色名称" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="权限" label-width="140px">
        <el-input v-model="form.rolePower" placeholder="例如：read,write" autocomplete="off"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="off">取消</el-button>
        <el-button type="primary" @click="Add">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {reactive} from 'vue'
import {RoleAdd} from "../../../service/role";

import { ElMessage } from 'element-plus';


const props = defineProps({
  addBtn: Boolean
});
const emit = defineEmits(['update-status']);
const Add = async() => {
  const data:any = await RoleAdd(form);
  if(data.code==200){
    ElMessage.success({
      message: '添加成功',
      type: 'success',
    })
    off();
  }else{
    ElMessage.error({
      message: '添加失败',
      type: 'error',
    })
  }
}

const off = () => {
  emit("update-status", false);
}


const form = reactive({
  roleName: '',
  rolePower: '',
})
</script>
